<template>
  <div class="sgedan">
      <!-- 搜索头部 -->
  <div class="daytitle" >
        <span class="iconfont icon-fanhui" @click="$router.back()"></span>
        <span class="iconfont icon-gengduo"></span>
      </div>
      
      <!-- 搜索输入框 -->
    
        <div class="searchframe">
    <div class="searchbar">
      <span class="iconfont icon-sousuo"></span>
      
      <input ref="input" placeholder="搜索歌单内歌曲"  />
      <i class="iconfont icon-shanchu" ></i>
    </div>
    <span class="quxiao" v-if="false" > 取消</span>
      </div>
      <!-- 歌单封面 -->
      <div class="scover">
          <gedanmodel :id="$route.query.id"></gedanmodel>

      </div>
      <!-- 歌单详情 -->
      <div class="gedaninfo">
          <div class="updatetime">
              <span>更新于2022-12-30</span>
          </div>
          <div class="gedanname">
              <span>Her Voice | 发现女性华语唱作人新声</span>
              <div class="right">
                  <span class="iconfont icon-zanxinxingguanzhu"></span>
                  
              </div>
          </div>
      </div>
      <!-- 创建者 -->
      <div class="creator">
          <div class="cleft">
               <img src="../assets/img/ceshi.jpeg" alt="">
          <span>ChipsYogurt</span>

          </div>
         
          <span class="iconfont icon-pinglun1"></span>
      </div>
      <!--歌单简介 -->
      <div class="subscript">
          <span>「Her Voice」 旨在发掘和呈现新世代女性唱作人/制作
人/歌手的声音。</span>
      </div>
      <!-- 播放量 -->
      <div class="playnum">
          <span>播放 1084</span>
          <span>喜欢 706</span>
      </div>
      <!--歌曲标签 -->
      <div class="tag">
          <ul>
              <li><span class="iconfont icon-hashjinghao"></span>酷女孩们</li>
              <li><span class="iconfont icon-hashjinghao"></span>PoP</li>
              <li><span class="iconfont icon-hashjinghao"></span>YONG</li>
              <li><span class="iconfont icon-hashjinghao"></span>HOLIY</li>
              
          </ul>
          
      </div>
<!-- 歌曲列表 -->
      <div class="title">
          <div class="left">
              <span class="iconfont icon-bofang"></span>
              <span>{{musiclist?.length}}</span>
          </div>
          <span class="iconfont icon-total_selection"></span>
      </div>
      <div class="musiclist" @click="$store.commit('changeplaylist',musiclist)">
            <music class="music" v-for="item in musiclist" :id='item.id'></music>
          

      </div>
      
  </div>
</template>

<script>
import gedanmodel from '../components/Small/gedanmodel.vue'
import music from '../components/Small/music.vue'
import {get} from '@/http/request.js'

export default {
  components: {
       gedanmodel,
       music
   },
   data(){
      return {
          musiclist:null
      }
   },
   mounted(){
       console.log(this.$route);
    // console.log(this.$router.query.id);
       get(`/playlist/detail?id=${this.$route.query.id}`).then(res=>{
           console.log('歌单歌曲列表',res.data.privileges);
           this.musiclist=res.data.privileges
       })
   }

}
</script>

<style lang="scss" scoped>
@import url(../comman/css/gedanview.css);
</style>